<template>
  <div class="q-pa-md bg-grey-9 text-white">
    <t-list dark bordered separator style="max-width: 318px">
      <t-item clickable v-ripple>
        <t-item-section>Single line item</t-item-section>
      </t-item>

      <t-item clickable v-ripple>
        <t-item-section>
          <t-item-label>Item with caption</t-item-label>
          <t-item-label caption>Caption</t-item-label>
        </t-item-section>
      </t-item>

      <t-item clickable v-ripple>
        <t-item-section>
          <t-item-label overline>OVERLINE</t-item-label>
          <t-item-label>Item with caption</t-item-label>
        </t-item-section>
      </t-item>
    </t-list>
  </div>
</template>
